<template>
	<view class="ex-mall-tab-page" :class="[$themeClass('page-bg-color')]">
		<!-- 头部 -->
		<view class="ex-mall-header" :class="[$themeClass('header-bg-color')]">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">首页</view>
			<!-- #endif -->
			<view class="ex-mall-header-content">
				<view class="ex-mall-header-left">
					<view class="ex-mall-header-btn" :class="[$themeClass('header-btn-left-bg-color')]" @click="toSearch">
						<text class="ex-mall-header-btn-icon ri-search-line" :class="[$themeClass('header-btn-left-icon-color')]"></text>
					</view>
				</view>
				<view class="ex-mall-header-title" :class="[$themeClass('header-title-color')]">云边</view>
				<view class="ex-mall-header-right">
					<view class="ex-mall-header-btn" :class="[$themeClass('header-btn-right-bg-color')]" @click="toFavorite">
						<text class="ex-mall-header-btn-icon ri-bookmark-line" :class="[$themeClass('header-btn-right-icon-color')]"></text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 轮播 -->
		<view class="carousel" :class="[$themeClass('block-bg-color')]">
			<swiper class="swiper" indicator-dots autoplay :interval="3000" circular>
				<swiper-item class="swiper-item" v-for="(x, xi) in carousels" :key="xi">
					<view class="carousel-item">
						<image class="img" :src="x.url"></image>
						<view class="show">
							<view class="word">
								<view class="w1">{{x.title}}</view>
								<view class="w2">{{x.info}}</view>
							</view>
							<view class="enter">
								<text class="icon ri-arrow-right-s-line"></text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品专栏 -->
		<view class="ex-mall-panel column" :class="[$themeClass('panel-bg-color')]" v-for="(x, xi) in columns" :key="xi">
			<view class="ex-mall-panel-title" :class="[$themeClass('panel-title-bg-color'), $themeClass('panel-title-color')]">
				<view class="text">{{x.title}}</view>
				<view class="more">
					<text class="icon ri-more-2-fill"></text>
				</view>
			</view>
			<view class="ex-mall-panel-content" :class="[$themeClass('panel-content-bg-color')]">
				<scroll-view scroll-x>
					<view class="column-list">
						<view class="item" v-for="(xx, xxi) in x.goods" :key="xxi" @click="$util.toLinkPage('/pages/goods/goods?id='+xx.id)">
							<view class="thumbnail">
								<image class="img" :src="xx.thumbnail_url" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" :class="[$themeClass('panel-title-color')]">
								<view class="title">{{xx.title}}</view>
								<view class="price">￥{{xx.price.toFixed(2)}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 专题 -->
		<view class="ex-mall-panel list" :class="[$themeClass('panel-bg-color')]">
			<view class="ex-mall-panel-title" :class="[$themeClass('panel-title-bg-color'), $themeClass('panel-title-color')]">
				<view class="text">专题</view>
			</view>
			<view class="ex-mall-panel-content" :class="[$themeClass('panel-content-bg-color')]">
				<view class="list-box">
					<view class="list-column left">
						<view class="item" >
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" :class="[$themeClass('panel-title-color')]">
								<view class="title">时尚创意女装</view>
								<view class="price">￥25.9</view>
							</view>
						</view>
					</view>
					<view class="list-column right">
						<view class="item" >
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" :class="[$themeClass('panel-title-color')]">
								<view class="title">时尚创意家居</view>
								<view class="price">￥9.9</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 推荐商品 -->
		<view class="ex-mall-panel list" :class="[$themeClass('panel-bg-color')]">
			<view class="ex-mall-panel-title" :class="[$themeClass('panel-title-bg-color'), $themeClass('panel-title-color')]">
				<view class="text">推荐</view>
			</view>
			<view class="ex-mall-panel-content" :class="[$themeClass('panel-content-bg-color')]">
				<view class="list-box">
					<view class="list-column left">
						<view class="item" v-for="(x, xi) in goods" :key="xi" v-if="(xi + 1) % 2 != 0" @click="$util.toLinkPage('/pages/goods/goods?id='+x.id)">
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" :class="[$themeClass('panel-title-color')]">
								<view class="title">{{x.title}}</view>
								<view class="price">￥{{x.price.toFixed(2)}}</view>
							</view>
						</view>
					</view>
					<view class="list-column right">
						<view class="item" v-for="(x, xi) in goods" :key="xi" v-if="(xi + 1) % 2 === 0" @click="$util.toLinkPage('/pages/goods/goods?id='+x.id)">
							<view class="thumbnail">
								<image class="img" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" :class="[$themeClass('panel-title-color')]">
								<view class="title">{{x.title}}</view>
								<view class="price">￥{{x.price.toFixed(2)}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="loadmore" :class="[$themeClass('panel-content-bg-color'), $themeClass('panel-title-color')]">
			<view class="text" v-if="loadMoreState === 'loadmore'">上拉加载更多</view>
			<view class="text" v-else-if="loadMoreState === 'loading'">正在加载...</view>
			<view class="text" v-else-if="loadMoreState === 'nomore'">没有更多了</view>
		</view>
	</view>
</template>

<script>
	import amap from '../../common/amap-wx.js';
	let systemInfo = {}
	export default {
		props: {
			scale: {
				type: Number,
				default: 16
			}
		},
		data() {
			return {
				reachBottom: false,
				loadMoreState: 'loadmore',
				/* 轮播 */
				carousels: [],
				/* 专栏 */
				columns: [],
				/* 专题 */
				specials: [],
				/* 推荐 */
				goods: [],
				/* 地图 */
				map: null,
				mapHeight: 1334,
				// 屏幕高度
				screenHeight: 667,
				latitude: 34.747018,
				longitude: 113.61936,
				polylines: [],
				covers: [{
					latitude: 0,
					longitude: 0,
					iconPath: '/static/location.png',
					width: 150,
					height: 200
				}],
				circles: [{
					latitude: 34.747018,
					longitude: 113.61936,
					color: '#0000004D',
					fillColor: '#00000001',
					radius: 600,
					strokeWidth: 300
				}]
			}
		},
		mounted () {
			this.$nextTick(() => {
				this.load()
				console.log(333);
				this.$emit('loaded', {
					name: 'index'
				})
				
				this._mapContext = uni.createMapContext('map', this)
				this._mapContext.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 60,
					complete(res) {
					  console.log('initMarkerCluster', res)
					}
				  });
			
				  this._mapContext.on("markerClusterCreate", (e) => {
					console.log("markerClusterCreate", e);
				  });
			})

			console.log(123);
			const that = this;

			// 使用高的API获取当前位置
			// #ifdef MP-WEIXIN
			let amapPlugin = new amap.AMapWX({  
				key: '52a2112b30f51391813d5a8edd427d78'
			});
			
			amapPlugin.getRegeo({
				success: (data) => {
					let addressComponent = data[0].regeocodeData.addressComponent
					that.district = addressComponent.district;
					getApp({allowDefault: true}).globalData.address = addressComponent.district;
					this.area = addressComponent.province + addressComponent.city + addressComponent.district; 
					this.getData();
				},
				fail: function(info){
					//失败回调 
					console.log('位置获取失败')
				}
			});
			// #endif
			
			console.log(55555);
			// 获取位置信息
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: function (res) {
					console.log('res', res);
					that.longitude = res.longitude
					that.latitude = res.latitude
					// that.latitude2 = res.latitude - 0.0008
					that.covers[0].longitude = res.longitude
					that.covers[0].latitude = res.latitude
					that.circles[0].longitude = res.longitude
					that.circles[0].latitude = res.latitude
					//当前登录用户的全局经纬度
					uni.setStorageSync('longitude',res.longitude);
					getApp({allowDefault: true}).globalData.longitude = res.longitude;
					uni.setStorageSync('latitude',res.latitude);
					getApp({allowDefault: true}).globalData.latitude = res.latitude;
					
					// #ifdef APP-PLUS
					that.district = res.address.district
					// #endif
				},
				fail: (err) => {
					console.log(err);
				}
			});
			
			// #ifdef H5
			let user_token = uni.getStorageSync('user_token');
			if(user_token){
				console.log('已登录');
				this.is_login = 1;
			}else{
				this.is_login = 2;
				console.log('未登录');
			}
			// #endif
		},
		methods: {
			load() {
				console.log('index on load')
				systemInfo = uni.getSystemInfoSync()
				this.carousels = [{
					url: '',
					title: '时尚创意家居',
					info: '简约北欧风格创意家具新品',
					link: ''
				}, {
					url: '',
					title: '时尚创意家居',
					info: '简约北欧风格创意家具新品',
					link: ''
				}, {
					url: '',
					title: '时尚创意家居',
					info: '简约北欧风格创意家具新品',
					link: ''
				}]

				this.columns = [{
					title: '新品',
					goods: [{
						thumbnail_url: '',
						title: '原创设计女装',
						price: 23.00
					}, {
						thumbnail_url: '',
						title: '原创设计女装',
						price: 23.00
					}, {
						thumbnail_url: '',
						title: '原创设计女装',
						price: 23.00
					}, {
						thumbnail_url: '',
						title: '原创设计女装',
						price: 23.00
					}]
				}]

				this.specials = [{
					thumbnail_url: '',
					title: '生活',
					quantity: 50,
					info: '创意家居生活',
					link: ''
				}, {
					thumbnail_url: '',
					title: '生活',
					quantity: 50,
					info: '创意家居生活',
					link: ''
				}, {
					thumbnail_url: '',
					title: '生活',
					quantity: 50,
					info: '创意家居生活',
					link: ''
				}]

				this.getGoods()
			},
			show() {
				console.log('index on show')
				uni.setNavigationBarTitle({
					title: '首页'
				})
			},
			hide() {
				console.log('index on hide')
			},
			getGoods() {
				this.loadMoreState = 'loading'
				var data = [{
					thumbnail_url: '/static/logo.png',
					title: '原创设计瓶子',
					price: 23.00
				}, {
					thumbnail_url: '/static/logo.png',
					title: '原创设计瓶子',
					price: 23.00
				}, {
					thumbnail_url: '/static/logo.png',
					title: '原创设计瓶子',
					price: 23.00
				}, {
					thumbnail_url: '/static/logo.png',
					title: '原创设计瓶子',
					price: 23.00
				}]
				if (this.goods.length >= 20) {
					this.loadMoreState = 'nomore'
					return
				}
				setTimeout(() => {
					this.goods = this.goods.concat(data)
					this.loadMoreState = 'loadmore'
				}, 1500)
			},
			scroll(e) {
				uni.createSelectorQuery().in(this).selectAll('.ex-mall-tab-page').boundingClientRect(rects => {
					var rect = rects[0]
					// console.log(rect.bottom, systemInfo.windowHeight)
					if (rect.bottom - systemInfo.windowHeight <= 50) {
						if (!this.reachBottom) {
							this.reachBottom = true
							this.loadMore()
						}
					} else {
						this.reachBottom = false
					}
				}).exec()
			},
			loadMore() {
				console.log('index load more')
				if (this.loadMoreState === 'loadmore') {
					this.getGoods()
				}
			},
			toSearch() {
				this.$switchTab('search')
			},
			toFavorite() {
				uni.navigateTo({
					url: '/pages/favorite/favorite'
				})
			},
		}
	}
</script>

<style lang="scss">
	.carousel {
		width: 100%;
		height: 48vw;
		margin: 0 auto;
		padding-top: 12px;

		&>.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				padding: 0 28px;
				box-sizing: border-box;

				&:nth-child(3n-2) {
					.carousel-item {
						&>.img {
							background-color: #784B32;
						}
					}
				}

				&:nth-child(3n-1) {
					.carousel-item {
						&>.img {
							background-color: #9B927D;
						}
					}
				}

				&:nth-child(3n) {
					.carousel-item {
						&>.img {
							background-color: #96824C;
						}
					}
				}
			}

			.carousel-item {
				position: relative;
				width: 100%;
				height: 100%;
				border-radius: 12px;
				overflow: hidden;

				&>.img {
					display: block;
					width: 100%;
					height: 100%;
				}

				&>.show {
					position: absolute;
					right: 20px;
					bottom: 30px;
					left: 20px;
					display: flex;

					&>.word {
						flex: 1;

						&>.w1 {
							font-size: 16px;
							font-weight: 500;
							color: #FFFFFF;
						}

						&>.w2 {
							margin-top: 10px;
							font-size: 14px;
							color: #FFFFFF;
						}
					}

					&>.enter {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 38px;
						height: 38px;
						background-color: #FFFFFF;
						border-radius: 12px;

						&>.icon {
							font-size: 22px;
							color: #292929;
						}
					}
				}
			}
		}
	}

	.ex-mall-panel.column {
		padding-top: 32px;

		.ex-mall-panel-content {
			.column-list {
				display: flex;
				align-items: flex-start;

				&>.item {
					padding: 0 16px 24px 0;

					&:first-child {
						padding-left: 28px;
					}

					&:last-child {
						padding-right: 28px;
					}

					&:nth-child(odd) {
						&>.thumbnail {
							&>.img {
								background-color: #0EAA90;
							}
						}
					}

					&:nth-child(even) {
						&>.thumbnail {
							&>.img {
								background-color: #F8E3DC;
							}
						}
					}

					&>.thumbnail {
						position: relative;

						&>.img {
							position: relative;
							z-index: 1;
							display: block;
							// width: 188px;
							// height: 218px;
							width: 154px;
							height: 200px;
							border-radius: 12px;
						}

						&>.btn {
							position: absolute;
							top: 14px;
							right: 14px;
							z-index: 10;
							display: flex;
							justify-content: center;
							align-items: center;
							width: 28px;
							height: 28px;
							border-radius: 9px;
							background-color: #FFFFFF;

							&.favorite {
								&>.icon {
									font-size: 15px;
									color: #292929;
								}
							}
						}
					}

					&>.info {
						line-height: 1;

						&>.title {
							margin-top: 20px;
							line-height: 1.3;
							font-size: 15px;
							font-weight: 600;
						}

						&>.price {
							margin-top: 10px;
							font-size: 13px;
						}
					}
				}
			}
		}
	}

	.special {
		padding: 28px;

		&>.item {
			position: relative;
			width: calc(100vw - (28px * 2));
			height: calc(100vw - (28px * 2));
			margin-top: 28px;

			&:first-child {
				margin-top: 0;
			}

			&:nth-child(3n-2) {
				&>.thumbnail {
					&>.img {
						background-color: #98847D;
					}
				}
			}

			&:nth-child(3n-1) {
				&>.thumbnail {
					&>.img {
						background-color: #A06441;
					}
				}
			}

			&:nth-child(3n) {
				&>.thumbnail {
					&>.img {
						background-color: #645E66;
					}
				}
			}

			&>.thumbnail {
				width: 100%;
				height: 100%;

				&>.img {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 12px;
				}
			}

			&>.word {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;

				&>.title {
					font-size: 29px;
					font-weight: 700;
					color: #FFFFFF;
				}

				&>.info {
					margin-top: 12px;
					font-size: 14px;
					color: #FFFFFF;
				}
			}

			&>.btn {
				position: absolute;
				bottom: 38px;
				left: 50%;
				transform: translateX(-50%);
				width: 146px;
				height: 58px;
				text-align: center;
				line-height: 58px;
				font-size: 14px;
				font-weight: 500;
				color: #292929;
				background-color: #FFFFFF;
				border-radius: 12px;
			}
		}
	}

	.ex-mall-panel.list {
		.ex-mall-panel-content {
			.list-box {
				display: flex;

				.list-column {
					flex: 1;

					&.left {
						padding: 0 6px 0 28px;

						&>.item {
							&:nth-child(odd) {
								&>.thumbnail {
									&>.img {
										background-color: #0EAA90;
									}
								}
							}

							&:nth-child(even) {
								&>.thumbnail {
									&>.img {
										background-color: #F8E3DC;
									}
								}
							}
						}
					}

					&.right {
						padding: 0 28px 0 6px;

						&>.item {
							&:nth-child(odd) {
								&>.thumbnail {
									&>.img {
										background-color: #A8A8A9;
									}
								}
							}

							&:nth-child(even) {
								&>.thumbnail {
									&>.img {
										background-color: #7F8688;
									}
								}
							}
						}
					}

					&>.item {
						width: 100%;
						padding-bottom: 24px;

						&>.thumbnail {
							position: relative;

							&>.img {
								position: relative;
								z-index: 1;
								display: block;
								width: 100%;
								height: 53vw;
								border-radius: 12px;
							}

							&>.btn {
								position: absolute;
								top: 14px;
								right: 14px;
								z-index: 10;
								display: flex;
								justify-content: center;
								align-items: center;
								width: 28px;
								height: 28px;
								border-radius: 9px;
								background-color: #FFFFFF;

								&.favorite {
									&>.icon {
										font-size: 15px;
										color: #292929;
									}
								}
							}
						}

						&>.info {
							line-height: 1;

							&>.title {
								margin-top: 20px;
								line-height: 1.3;
								font-size: 15px;
								font-weight: 600;
							}

							&>.price {
								margin-top: 10px;
								font-size: 13px;
							}
						}
					}
				}
			}
		}
	}

	.loadmore {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 78px;

		&>.text {
			font-size: 14px;
			font-weight: 600;
		}
	}
#map {
	width: 638rpx;
	height: 600rpx;
}
</style>
